<!-- 营销管理-秒杀活动 -->
<template>
    <el-card style="max-width: 100%;">
        <search-box :tableDataInput="tableData" :searchField="'title'" @search="handleSearch"></search-box>
        <el-table :data="selectedItems" style="margin-top: 16px;font-size: 16px;"
            :header-cell-style="{ background: '#EBEEF2' }" :row-style="{ height: '80px' }">
            <el-table-column prop="title" label="活动标题" align="center" />
            <el-table-column prop="activitystatus" label="活动状态" align="center">
                <template #default="scope">
                    <span v-if="scope.row.activitystatus == 0" style="color: red;">进行中</span>
                    <span v-if="scope.row.activitystatus == 1">未开始</span>
                </template>
            </el-table-column>
            <el-table-column prop="starttime" label="开始时间" align="center" />
            <el-table-column prop="endtime" label="结束时间" align="center" />
            <el-table-column prop="addstatus" label="参与状态" align="center">
                <template #default="scope">
                    <span v-if="scope.row.addstatus == 0" style="color: red;">未参与</span>
                    <span v-if="scope.row.addstatus == 1">参与中</span>
                </template>
            </el-table-column>
            <el-table-column prop="number" label="参与场次数" align="center" />
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <div @click="participate(scope.$index, scope.row)"><img
                            src="../../assets/marketing/participateInActivities.svg" class="participate">
                        <span>参与活动</span>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <joinActivity :visible="Visible" @update-visible="updateVisible"/>
    </el-card>
</template>
<script>
import joinActivity from './components/joinActivity.vue';
export default {
    components: { joinActivity },
    data() {
        return {
            selectedItems: [],
            currentRowData: null, // 用于存储当前行的数据 
            Visible: false,
            tableData: [
                {
                    id:'1',
                    title: '618秒杀活动',
                    activitystatus: '1',
                    starttime: '2024/6/1',
                    endtime: '2024/6/20',
                    addstatus: '0',
                    number: '0'
                },
                {
                    id:'2',
                    title: '双11秒杀活动',
                    activitystatus: '1',
                    starttime: '2024/6/1',
                    endtime: '2024/6/20',
                    addstatus: '0',
                    number: '0'
                },
                {
                    id:'3',
                    title: '双12秒杀活动',
                    activitystatus: '1',
                    starttime: '2024/6/1',
                    endtime: '2024/6/20',
                    addstatus: '0',
                    number: '0'
                },
            ],
            input3: '',
        }
    },
    created() {
        this.selectedItems = this.tableData; // 初始显示所有商品
    },
    methods: {
        handleSearch(filtered) {
            this.selectedItems = filtered;
        },
        participate(index,row) {
            console.log(index)//所点击的为第几列
            console.log(row)//所点击的这一列的数据
            this.Visible = true
        },
        updateVisible() {
            this.Visible = false
        }
    },
}
</script>

<style scoped>
.input1 {
    font-size: 16px;
    width: 241px;
    opacity: 1;
    border-radius: 80px;
    background: rgb(153, 155, 158);
}

.input1>>>input.el-input__inner {
    background: rgba(235, 238, 242, 1);
    border-radius: 20px;
}

.participate {
    width: 16px;
    height: 16px;
    position: relative;
    top: 2px;
    margin-right: 5px;
}
</style>